<template>
  <div class="home-container">
    <NavBar class="home-nav"><div slot="center">购物街</div></NavBar>
    <tab-control :title="['流行', '新款', '精选']" @tabClick="tabClick" ref="tabControl1" class="tabcontrol" v-show="isFixed" />
    <Scroll class="content"
            ref="scroll"
            :probeType="3"
            @scroll="contentScroll"
            :pull-up-load="true"
            @pullingUp="loadMore">
      <home-swiper :banners="banners" @imgLoad="swiperImgLoad"/>
      <recommend-view :recommends="recommends" />
      <FeatureView />
      <tab-control :title="['流行', '新款', '精选']" @tabClick="tabClick" ref="tabControl2" />
      <Goods-list :goods="showGoods"/>
    </Scroll>
    <back-top @click.native="backClick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
import HomeSwiper from "@/views/home/childComps/HomeSwiper";
import RecommendView from "@/views/home/childComps/RecommendView";
import FeatureView from "@/views/home/childComps/FeatureView";

import NavBar from "@/components/common/navbar/NavBar";
import TabControl from "@/components/content/tabcontrol/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";
import Scroll from "@/components/common/scroll/Scroll";
import BackTop from "@/components/common/backtop/BackTop";

import { itemListenerMixin } from "@/mixin/mixin"

export default {
  name: "Home",
  components: {
    NavBar,
    HomeSwiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodsList,
    Scroll,
    BackTop
  },
  data() {
    return {
      banners: [], //轮播图数据
      recommends: [], //推荐列表数据
      goods: { //商品数据
        'pop': { page: 0, list: [] },
        'new': { page: 0, list: [] },
        'sell': { page: 0, list: [] }
      },
      currentType: 'pop',
      isShowBackTop: false,
      tabControlOffsetTop: 0,
      isFixed: false,
      saveY: 0,
      //itemImgListener: null //保存事件  用混入
    }
  },
  created() {
    this.getHomeMultidata();
    this.getHomeGoodsList('pop')
    this.getHomeGoodsList('new')
    this.getHomeGoodsList('sell')

    // console.log(this.$refs.scroll) undefined
  },
  mixins: [itemListenerMixin],
  // mounted() { // 在首页和详情页都需要这段代码，所以可以采用混入的方式，将代码放在mixin中复用
  //   const refresh = debounce(this.$refs.scroll.refresh, 50)
  //   //监听商品列表中图片加载完成（处理 滚动区域 的 卡顿 bug）
  //   this.itemImgListener = () => { refresh() }
  //   // this.$bus.$on('itemImgLoad', () => {
  //   //   // this.$refs.scroll.refresh()  通过 防抖函数 控制 该函数的 执行次数
  //   //   refresh() //如果下一次执行的非常快，就会将上一次取消掉
  //   // })
  //   this.$bus.$on('itemImgLoad', this.itemImgListener)
  // },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list
    }
  },
  activated() {
    this.$refs.scroll.scrollTo(0, this.saveY, 0)
    this.$refs.scroll.refresh()
  },
  deactivated() {
    // 离开首页是保存当前位置
    this.saveY = this.$refs.scroll.scroll.y

    // 离开首页时，取消图片列表的刷新事件，防止在详情页中会刷新首页的图片列表
    this.$bus.$off('itemImgLoad', this.itemImgListener)
  },
  methods: {
    async getHomeMultidata() {
      const {data: res} =  await this.$api.home.getHomeMultidata()
      console.log(res)
      this.banners = res.banner.list
      this.recommends = res.recommend.list
    },
    async getHomeGoodsList(type) {
      const page = this.goods[type].page + 1
      const {data: res} = await this.$api.home.getHomeGoods(type, page)
      console.log(res)
      this.goods[type].list.push(...res.list)
      this.goods[type].page += 1

      this.$refs.scroll.finishPullUp()
    },
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = 'pop';
          break;
        case 1:
          this.currentType = 'new';
          break;
        case 2:
          this.currentType = 'sell';
          break;
      }
      this.$refs.tabControl2.currentIndex = index
      this.$refs.tabControl1.currentIndex = index
    },
    backClick() {
      this.$refs.scroll.scrollTo(0,0)
    },
    contentScroll(position) {
      // if(-position.y > 1000) {
      //   this.isShowBackTop = !this.isShowBackTop
      // }
      this.isShowBackTop = -position.y > 1000

      // tabcontrol 是否吸顶
       this.isFixed =  -position.y > this.tabControlOffsetTop
    },
    // 上拉加载更多
    loadMore() {
      this.getHomeGoodsList(this.currentType) //默认只能加载一次，所以，上拉加载更多后需要调用 finishPullUp() 这个方法
    },
    swiperImgLoad() {
      this.tabControlOffsetTop = this.$refs.tabControl2.$el.offsetTop
    }
  },
}
</script>

<style scoped>
.home-container {
  position: relative;
  /*padding-top: 44px;*/
  height: 100vh;
}
.home-nav {

  background-color: var(--color-tint);
  color: #fff;
}
/*.tab-control {*/
/*  position: sticky;*/
/*  top: 44px;*/
/*  background-color: #fff;*/
/*  z-index: 15*/
/*}*/
/*.content {*/
/*  height: calc(100% - 93px);*/
/*  overflow: hidden;*/
/*}*/

.tabcontrol {
  position: relative;
  z-index: 20
}
.content {
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
</style>
